<template>
    <div class="facility"  :style="'height:' + height + 'px;'">
        <img class="facility-backimg" src="../../assets/back.png"/>
        <div class="facility-back">
            <div class="facility-search-b"></div>
            <div class="facility-search">
                <img class="facility-search-img" src="../../assets/search-b-icom.png" />
                <input class="facility-inp" placeholder="搜索设备" />
            </div>
            <div class="facility-time">{{new Date | format}}</div>
            <div class="facility-tips">我的实验室</div>

            <div class="footDiv"></div>
        </div>
        <div class="facility-list">
            <div class="facility-con" v-for="(item, index) in data" :key = 'index' :class="{'facility-con-t': (index+1)%3 !==0}" @click="getList(index)">
                <img class="facility-con-icon" :src="item.picture"/>
                <div>{{item.functionName}}</div>
            </div>
        </div>
        <FootTab></FootTab>
    </div>
</template>

<script>
import FootTab from '../../components/footTab.vue'
import { getLaboratoryList } from '../../api/index.js'
import { getYYYYMMDD } from '../../api/unit.js'
export default {
  data () {
    return {
      tabIdx: 0,
      height: document.documentElement.clientHeight,
      data: []
    }
  },
  filters: {
    format: function (value) {
      return getYYYYMMDD(value).nTimes
    }
  },
  methods: {
    getList (index) {
      if (index === 0) {
        this.$router.push({path: '/laboratory/testing'})
      }
      if (index === 1) {
        this.$router.push({path: '/laboratory/manage', query: {index: 1}})
      }
      if (index === 2) {
        this.$router.push({path: '/laboratory/feeds', query: {index: 1}})
      }
      if (index === 3) {
        this.$router.push({path: '/laboratory/bios', query: {index: 1}})
      }
      if (index === 4) {
        this.$router.push({path: '/laboratory/join', query: {index: 1}})
      }
      // this.$router.push({path: '/facility/list', query: {id: id, name: name}})
    },
    async getData () {
      let msg = await getLaboratoryList()
      this.data = msg.data
      console.log('====>', msg.data)
    }
  },
  mounted () {
    this.getData()
  },
  components: {
    FootTab
  }
}
</script>

<style scoped>
    .facility{
        /*position: relative;*/
        background: #EDEAED;
    }
    .facility-backimg{
        position: fixed;
        z-index: 10;
        width: 750px;
        height: 527px;
    }
    .facility-back{
        position: fixed;
        top:0;
        z-index: 20;
        /*z-index: -1;*/
        width: 750px;
        height: 527px;
        /*background:linear-gradient(35deg,rgba(0,186,255,1),rgba(11,155,238,1));*/
    }
    .facility-search-b{
        position: absolute;
        left: 30px;
        top: 52px;
        width: 690px;
        height: 64px;
        border-radius:10px;
        background:rgba(236,235,235,1);
        opacity:0.5;
        border-radius:10px;
        z-index: 90;
    }
    .facility-search{
        display: flex;
        z-index: 99;
        justify-content: center;
        align-items: center;
        width: 690px;
        height: 64px;
        margin-left: 30px;
        border-radius:10px;
        margin-top: 52px;
        overflow: hidden;
        font-size: 28px;
    }
    .facility-inp{
        width: 550px;
        background: none;
        color: #fff;
    }
    .facility-inp::-webkit-input-placeholder{
        color: #fff;
    }
    .facility-search-img{
        width: 31px;
        height: 31px;
        margin-right: 24px;
    }
    .facility-time{
        font-size:26px;
        color: #fff;
        margin-top: 41px;
        margin-bottom: 23px;
        margin-left: 47px;
    }
    .facility-tips{
        padding-top: 23px;
        margin-left: 47px;
        font-weight: bold;
        color: #FFFEFE;
        font-size: 45px;
        letter-spacing: 10px;
    }
    .facility-list{
        position: fixed;
        z-index: 999;
        height: calc(100% - 380 );
        width: 690px;
        margin-left: 30px;
        font-size: 24px;
        padding-top: 305px;
        /*margin-top: 53px;*/
        display: flex;
        flex-wrap: wrap;
    }
    .facility-con{
        width: 208px;
        height: 206px;
        background:rgba(255,255,255,1);
        box-shadow:0px 1px 15px 0px rgba(194,194,194,0.77);
        border-radius:10px;
        margin-bottom: 30px;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .facility-con-t{
        margin-right: 33px;
    }
    .facility-con-icon{
        width: 69px;
        height: 69px;
        margin-top: 50px;
        margin-bottom: 36px;
    }
    .footDiv{
        height: 98px;
    }
</style>
